<template>

<div class="menu">
    
     <el-row class="tac">
          <el-menu
           v-for="(item,index) in array" :key="index"
            default-active="1-2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="Switch"
            background-color="#304156"
            text-color="#ffff"
            style="height:100%; "
          >
            <el-submenu :index="item.index">
              <template slot="title">
                <i style="margin-left:-15px;margin-top:18px;" :class="item.icon"></i>
                <span slot="title">{{item.title}}</span>
              </template>
              <el-menu-item-group v-for="(itemChild,index) in item.children" :key="index">
                <el-menu-item
                  @click="routerTo(itemChild.IdBoolean,itemChild.path)"
                  style="width:100%;min-width: 119px; padding:0;"
                  :index="item.index+'-'+itemChild.index"
                >{{itemChild.title}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

   
   
          </el-menu>
        </el-row>
</div>
</template>

<script>

export default {

props:{

 fun:{

type:Function,

 },

Switch:{

type:Boolean,

// eslint-disable-next-line vue/require-valid-default-prop
default:false

 }

 },

data(){ 

return {

isCollapse: true,
array:[
  {index:'1', icon:'el-icon-location',title:'导航一',children:[
    {title:'文档',path:'/file',IdBoolean:false ,index:'1'},
     {title:'主页',path:'/HomeComponents',IdBoolean:false ,index:'2'},
      {title:'皮肤',path:'/skin',IdBoolean:false ,index:'3'}
  ]},
  {index:'2',icon:'el-icon-goods',title:'商品',children:[
    {title:'SidebarItem',path:'/SidebarItem',IdBoolean:false ,index:'1'},
     {title:'选项二',path:'#',IdBoolean:false ,index:'2'},
      {title:'选项三',path:'#',IdBoolean:false ,index:'3'}
  ]}
]

}

},

components: {

},

computed: {

evenNumbers: function () {

return this.key.filter(function (number) {

return number % 3 === 0

})

}

},

beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

 },

created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。


 },

 beforeMount:function (){

},

methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。

 handleOpen(key, keyPath) {
        // eslint-disable-next-line no-console
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // eslint-disable-next-line no-console
        console.log(key, keyPath);
      },
      routerTo(id,path){
        this.PouterPush(id,path)
      }

}

}

</script>

<style lang="scss" scope>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
    // min-height: 400px;
  }
  .el-submenu {
    display: flex;
    flex-direction:column ;

  }
  .el-submenu__title {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

.el-menu--collapse  {
  width: 40px;
}
.menu {
  background-color: #304156;
  height: 100%;
}
</style>
